<template>
    <div class="schedule-table" v-loading="loadings">
        <div class="sace_input">
            <div>
                <a-form size="small" :model="pageData" layout="inline">
                    <a-form-item label="查询日期" v-if="selectType == 1">
                        <a-date-picker  popup-container="html"  class="bacClass" v-model="dropDownData1" style="width: 200px;" />至<a-date-picker  popup-container="html" 
                            class="bacClass" v-model="dropDownData2" style="width: 200px;" />
                    </a-form-item>
                    <a-form-item label="保养日期(周查询)" v-if="selectType == 2">
                        <a-week-picker style="width: 200px;" v-model="dropDownData3" class="bacClass" />至<a-week-picker
                            style="width: 200px;" v-model="dropDownData4" class="bacClass" />
                    </a-form-item>
                    <a-form-item label="保养日期(月查询)" v-if="selectType == 3">
                        <a-input style="width: 200px;" placeholder="1~12月" disabled class="bacClass" />
                    </a-form-item>
                </a-form>
            </div>
            <!-- <el-button-group label="时间">
                <el-button @click="dayClick" :type="buttonhour">日</el-button>
                <el-button @click="weeksClick" :type="buttonday">周</el-button>
                <el-button @click="monthClick" :type="buttonmonth">月</el-button>
            </el-button-group> -->
            <div>
                <el-button type="primary" :icon="Search" @click="searchClick">查询</el-button>
            </div>
            <div>
                <div>
                    <div class="bissBoosNo1"></div>&nbsp;
                    <div> 未派工</div>
                </div>
                <div>
                    <div class="bissBoosNo2"></div>&nbsp;
                    <div> 已派工</div>
                </div>
                <div>
                    <div class="bissBoosNo3"></div>&nbsp;
                    <div> 已完成</div>
                </div>
            </div>
        </div>
        <table cellpadding="0" border="0">
            <thead>
                <tr>
                    <th class="jtCss">机台/时间</th>
                    <th v-for="item in weekDay" class="week-title">
                        {{ item.title }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in duration">
                    <td class="duration-title">{{ item.title }}</td>
                    <td v-for="n in weekDay">
                        <div @click="divClicks(courdList[item.title + ',' + n.id])"
                            :class="courdList[item.title + ',' + n.id]?.completeState == 0 ? 'duration-cour' : courdList[item.title + ',' + n.id]?.completeState == 1 ? 'duration-cour2' : courdList[item.title + ',' + n.id]?.completeState == 2 ? 'duration-cour3' : ''">
                            <a-popover title="明细" :style="{ width: '800px' }">
                                <a-button
                                    :style="{ backgroundColor: 'rgba(0, 0, 0, -1)', width: '100%', color: '#fff' }">{{(courdList[item.title + ',' + n.id]?.list[0].sunUpkeepList.length > 0 ? '日':'')+(courdList[item.title + ',' + n.id]?.list[0].weekUpkeepList.length > 0 ? '/周':'')+((courdList[item.title + ',' + n.id]?.list[0].monthUpkeepList.length > 0 ? '/月':''))}}</a-button>
                                <template #content>
                                    <!-- <a-table :bordered="{ wrapper: true, cell: true }" :columns="columns"
                                        :data="courdList[item.title + ',' + n.id]?.list" :pagination="false"
                                        :column-resizable="true">
                                        <template #maintainType="{ record }">
                                            {{ record.maintainType == 1 ? '日保养' : record.maintainType ==
                                                2 ? '周保养' : record.maintainType == 3 ? '月保养' : '' }}
                                        </template>
                                    </a-table> -->
                                    <div class="contentDiv">
                                        <div class="contentDiv2">
                                            <div class="contentDivTile">日保养</div>
                                            <div class="contentDivTile2"
                                                v-for="items in courdList[item.title + ',' + n.id]?.list[0].sunUpkeepList">
                                                {{ items }}</div>
                                        </div>
                                        <div class="contentDiv2">
                                            <div class="contentDivTile">周保养</div>
                                            <div class="contentDivTile2"
                                                v-for="items in courdList[item.title + ',' + n.id]?.list[0].weekUpkeepList">
                                                {{ items }}</div>
                                        </div>
                                        <div class="contentDiv2">
                                            <div class="contentDivTile">月保养</div>
                                            <div class="contentDivTile2"
                                                v-for="items in courdList[item.title + ',' + n.id]?.list[0].monthUpkeepList">
                                                {{ items }}</div>
                                        </div>
                                    </div>
                                    <div class="contentDivNo1">
                                        <div class="contentDivNo2">点检人:</div>
                                        <div class="contentDivNo3">{{ courdList[item.title + ',' + n.id]?.list[0].staff }}
                                        </div>
                                    </div>
                                </template>
                            </a-popover>

                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <a-modal :width="600" v-model:visible="visible2" @ok="handleOk2" @cancel="() => visible2 = false"
        :mask-closable="false">
        <template #title>
            {{ sideTitle }}
        </template>
        <a-form :model="dataForm2">
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="点检人:" field="staff" label-col-flex="80px">
                        {{ dataForm2.staff }}
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="说明:" field="staff" label-col-flex="80px">
                        {{ dataForm2.illustrate }}
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="图片:" field="staff" label-col-flex="80px">
                        <a-image-preview-group infinite>
                            <a-space>
                                <a-image
                                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
                                    width="100" />
                                <a-image
                                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp"
                                    width="100" />
                                <a-image
                                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp"
                                    width="100" />
                                <a-image
                                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp"
                                    width="100" />
                            </a-space>
                        </a-image-preview-group>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
    <a-modal :width="500" v-model:visible="visible" :on-before-ok="handleOk" @cancel="() => visible = false"
        :mask-closable="false">
        <template #title>
            {{ sideTitle }}
        </template>
        <a-form ref="formRef" :model="dataForm2">
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="员工姓名" field="staff" label-col-flex="80px"
                        :rules="[{ required: true, message: '员工姓名必填' }]" :validate-trigger="['change', 'blur']">
                        <a-select popup-container="html"  class="bacClass" :default-value="dataForm.staff" :style="{ width: '250pxs' }" multiple
                            v-model="dataForm.staff" allow-clear allow-search>
                            <a-option v-for="item in wxYgList" :value="item.id + '-' + item.name">{{
                                item.name
                            }}
                            </a-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>
<script setup lang="ts">
import { ref, toRefs, reactive, onMounted } from "vue"
import { Search } from '@element-plus/icons-vue'
import { post } from "@/api/http"
import { Message } from '@arco-design/web-vue'
import { baseURL } from '@/api/axios.config'

onMounted(() => {
    var currentDate = new Date()
    let currentDate2 = Number(currentDate.getTime()) + (60 * 1000 * 60 * 24 * 21)
    pageData.dropDownData1 = formatDateTime(currentDate, 'yyyy-MM-dd')
    pageData.dropDownData2 = formatDateTime(new Date(currentDate2), 'yyyy-MM-dd')
    select(1, formatDateTime(currentDate, 'yyyy-MM-dd'), formatDateTime(new Date(currentDate2), 'yyyy-MM-dd'))
})

function formatDateTime(date: any, format: any) {
    const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
        'H+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds(), // 毫秒
        a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
        A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (let k in o) {
        if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(
                RegExp.$1,
                RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
            );
        }
    }
    return format;
}

const loadings = ref(false)

const selectType = ref(1)

const weekDay: any = ref([])

const duration: any = ref([])

const courdList: any = ref()

const pageData: any = reactive({ dropDownData1: '', dropDownData2: '', dropDownData3: '', dropDownData4: '' })

const { dropDownData1, dropDownData2, dropDownData3, dropDownData4 } = toRefs(pageData)

const searchClick = () => {
    if (selectType.value == 1) {
        select(1, pageData.dropDownData1, pageData.dropDownData2)
    } else if (selectType.value == 2) {
        select(2, pageData.dropDownData3, pageData.dropDownData4)
    } else if (selectType.value == 3) {
        select(3, '', '')
    }
}

const dataTime = reactive({
    buttonhour: 'primary',
    buttonday: '',
    buttonmonth: '',
})

const { buttonhour, buttonday, buttonmonth } = toRefs(dataTime)

function select(num: any, page1: any, page2: any) {
    loadings.value = true
    post({
        url: 'temRepair/bindingTime/reportKeep',
        data: {
            "timeBegin": page1,
            "timeEnd": page2
        }
    }).then((res: any) => {
        if (res.code == 200) {
            let weekDatList: any = []
            let listLeftList: any = []
            res.data.keepDataTop.typeTime.forEach((o: any) => {
                if (o != null) {
                    if (selectType.value != 3) {
                        weekDatList.push({
                            id: o,
                            title: o.slice(0, 4) + '-' + o.slice(4, 6) + '-' + o.slice(6)
                        })
                    } else {
                        weekDatList.push({
                            id: o,
                            title: o.slice(0, 4) + '-' + o.slice(5, 7)
                        })
                    }
                }
            })
            res.data.keepDataLeft.equipmenCode.forEach((o: any) => {
                listLeftList.push({
                    title: o
                },)
            })
            weekDay.value = weekDatList
            duration.value = listLeftList
            courdList.value = res.data.keepData
            console.log(courdList.value)
            loadings.value = false
        } else {
            Message.error(res.message)
            weekDay.value = []
            duration.value = []
            courdList.value = []
        }
    }).finally(() => {
        loadings.value = false
    })
}

const monthClick = () => {
    selectType.value = 3
    dataTime.buttonhour = ''
    dataTime.buttonday = ''
    dataTime.buttonmonth = 'primary'
    console.log(pageData.dropDownData4)
}

const weeksClick = () => {
    selectType.value = 2
    dataTime.buttonhour = ''
    dataTime.buttonday = 'primary'
    dataTime.buttonmonth = ''
    console.log(pageData.dropDownData3)
}

const dayClick = () => {
    selectType.value = 1
    dataTime.buttonhour = 'primary'
    dataTime.buttonday = ''
    dataTime.buttonmonth = ''
}

const columns = ref([
    {
        title: '保养类型',
        key: 'maintainType',
        dataIndex: 'maintainType',
        slotName: 'maintainType',
        width: 180,
    },
    {
        title: '保养名称',
        key: 'upkeepProduct',
        dataIndex: 'upkeepProduct',
        width: 100,
    },
    {
        title: '点检人',
        key: 'staff',
        dataIndex: 'staff',
        width: 100,
    },
])

let recordList: any;

const wxYgList: any = ref([])

const divClicks = (record: any) => {
    const data1:any = new Date(record.list[0].timeType.slice(0, 4) + '-' + record.list[0].timeType.slice(4, 6) + '-' + record.list[0].timeType.slice(6)+' 23:59:59')
    const data:any = new Date()
   if(data1.getTime() < data.getTime()){
       Message.warning('时间超期')
       return false
   }
    for (let i in dataForm) {
        dataForm[i] = null
    }
    if (record.completeState == 2) {
        visible2.value = true
        dataForm2.staff = record.list[0].staff
        return
    }
    post({
        url: 'admin/acl/user/findUserToken'
    }).then((res: any) => {
        if (res.code == 200) {
            if (res.data.data.departmentId == null || res.data.data.departmentId == 0) {
                Message.error('当前登陆账号无部门!')
                return
            }
            post({
                url: 'org/hrEmployee/getList',
                data: {
                    deleteState: 0,
                    obsoleteState: 0,
                    department_id: res.data.data.departmentId
                }
            }).then((resz: any) => {
                if (resz.code == 200) {
                    wxYgList.value = resz.data
                    recordList = record.list
                    if (record.completeState == 0) {
                        sideTitle.value = '保养派工'
                        visible.value = true
                    } else if (record.completeState == 1) {
                        sideTitle.value = '修改派工'
                        dataForm.staff = []
                        record.list[0].staff.split(',').forEach((v: any, index: any) => {
                            dataForm.staff.push(record.list[0].staffId.split(',')[index] + '-' + v)
                        })
                        visible.value = true
                    } else if (record.completeState == 2) {
                        sideTitle.value = '保养回馈'
                        visible2.value = true
                        dataForm2.staff = record.list[0].staff
                    }
                } else {
                    Message.error(resz.message)
                }
            })
        } else {
            Message.error(res.message)
        }
    })
}

const visible: any = ref(false)
const visible2: any = ref(false)

const sideTitle = ref('')

const dataForm: any = reactive({
    "id": null,
    "staff": "",
    "staffId": ""
})

const dataForm2: any = reactive({
    staff: '',
    illustrate: '',
    upkeepPictureUrl: []
})

const formRef: any = ref()

const handleOk = async () => {
    const err = await formRef.value?.validate()
    if (!err) {
        let wxYgString = ''
        let wxYgStringId = ''
        dataForm.staff.forEach((e: any, index: any) => {
            if (index == dataForm.staff.length - 1) {
                wxYgString = wxYgString + e.split('-')[1]
                wxYgStringId = wxYgStringId + e.split('-')[0]
            } else {
                wxYgString = wxYgString + e.split('-')[1] + ','
                wxYgStringId = wxYgStringId + e.split('-')[0] + ','
            }
        })
        let dataFromList = recordList.map((v: any) => {
            return {
                id: v.id,
                staff: wxYgString,
                staffId: wxYgStringId
            }
        })
        const res = await post({
            url: 'temRepair/maintainSum/startDispatchingMaintainSum',
            data: dataFromList
        })
        if (res.code == 200) {
            Message.success(res.message)
            select(1, pageData.dropDownData1, pageData.dropDownData2)
            // if (recordList[0].maintainType == 1) {
            //     select(1, pageData.dropDownData1, pageData.dropDownData2)
            // } else if (recordList[0].maintainType == 2) {
            //     select(2, pageData.dropDownData3, pageData.dropDownData4)
            // } else if (recordList[0].maintainType == 3) {
            //     select(3, '', '')
            // }
            return true
        }
    } else {
        return false
    }

}
const handleOk2 = () => {

}
</script>
<style lang="less" scoped>
.schedule-table {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: auto;

    .sace_input {
        width: 80%;
        display: flex;
        justify-content: space-between;
        height: 80px;
        align-items: center;
        margin-top: 10px;
        position: sticky;
        left: 0;

        div:last-of-type {
            display: flex;

            div {
                width: 100px;
                display: flex;
                font-family: Microsoft Yahei;
                font-size: 16px;
                font-weight: 500;

                .bissBoosNo1 {
                    width: 20px;
                    height: 18px;
                    border-radius: 2px;
                    background-color: #ff5916;
                    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
                }


                .bissBoosNo2 {
                    width: 20px;
                    height: 18px;
                    border-radius: 2px;
                    background-color: #409eff;
                    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
                }


                .bissBoosNo3 {
                    width: 20px;
                    height: 18px;
                    border-radius: 2px;
                    background-color: #44c553;
                    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
                }
            }
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        border-color: #ccc;
        min-height: 20vh;
        max-height: 80vh;

        thead {
            position: sticky;
            top: 0px;
            background-color: white;
            z-index: 10;
        }

        tbody td:first-child {
            position: sticky;
            left: 0px;
            top: 60px;
        }

        .jtCss {
            position: sticky;
            left: 0px;
            z-index: 999;
            background-color: #fff;
            width: 100px;
        }

        th,
        td {
            text-align: center;
            border: 1px solid #ccc;
        }

        th {
            height: 60px;
            width: 100px;
        }

        td {
            height: 60px;
            cursor: pointer;
        }
    }
}

.week-title {
    color: #004085;
    background-color: #cce5ff;
}

.duration-title {
    color: #856404;
    background-color: #fff3cd;
    width: 100px;
    z-index: 998;
}

.duration-cour {
    background-color: #ff5916 !important;
    width: 100%;
    height: 50%;
    border-radius: 10px;
    margin-top: 3px;
}

.duration-cour2 {
    background-color: #409eff !important;
    width: 100%;
    height: 50%;
    border-radius: 10px;
    margin-top: 3px;
}

.duration-cour3 {
    background-color: #44c553 !important;
    width: 100%;
    height: 50%;
    border-radius: 10px;
    margin-top: 3px;
}

.contentDiv {
    display: flex;
    justify-content: space-between;

    .contentDiv2 {
        width: 145px;
        height: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;

        .contentDivTile {
            font-family: Microsoft Yahei;
            font-size: 16px;
            font-weight: 500;
            width: 143px;
            height: 15%;
            text-align: center;
            color: #409eff;
            border-bottom: 1px dashed #ccc;

        }

        .contentDivTile2 {
            font-family: Microsoft Yahei;
            font-size: 14px;
            font-weight: 500;
            width: 143px;
            height: 20px;
            text-align: center;
            border-bottom: 1px dashed #ccc;
        }
    }
}

.contentDivNo1 {
    width: 450px;
    height: 25px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    .contentDivNo2 {
        font-family: Microsoft Yahei;
        font-size: 16px;
        font-weight: 500;
        color: #409eff;
        position: relative;
        left: 15px;
        line-height: 22px;
    }

    .contentDivNo3 {
        font-size: 14px;
        font-weight: 500;
        position: relative;
        left: 30px;
    }
}

// ::-webkit-scrollbar {
//     width: 10px;
//     height: 10px;
//     background-color: #f5f5f5;
// }

// ::-webkit-scrollbar-thumb {
//     border-radius: 10px;
//     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
//     background-color: #dbf3ee;
// }
</style>